<template>
  <div class="security-root">
    <el-card>
      <el-scrollbar>
        <div class="item-root" v-for="(item,index) in listConfig" :key="index">
          <div class="content-container">
            <div class="txt-container">
              <div class="icon-container">
                <i v-if="item.type === ICON_TYPE.safety" style="color: #63ba4d"
                   class="el-icon-circle-check icon-item"></i>
                <i v-if="item.type === ICON_TYPE.risk" style="color: #FF5454"
                   class="el-icon-warning-outline icon-item"></i>
              </div>
              <div class="con">
                <div class="tit-container txt-item">
                  <div class="err-txt" v-if="item.type === ICON_TYPE.risk">
                    [{{ item.errorTxt }}]
                  </div>
                  <div class="tit-txt">
                    {{ item.title }}
                  </div>
                </div>
                <div class="error-info-container txt-item"
                     v-if="item.errorInfo != null && item.errorInfo !== ''">
                  [{{ item.errorInfo }}]
                </div>
                <div class="info-container txt-item">
                  {{ item.info }}
                </div>
              </div>
            </div>
            <div class="button-container">
              <div class="button-item" @click="clickHandler(buttonTxt,item)"
                   v-for="(buttonTxt,currentIndex) in item.buttonList" :key="`${index}_${currentIndex}`">
                {{ buttonTxt.txt }}
              </div>
            </div>
          </div>
          <el-divider v-if="index !== listConfig.length -1"></el-divider>
        </div>
      </el-scrollbar>
    </el-card>
    <el-dialog
        :close-on-click-modal="false"
        title="修改密码"
        :visible.sync="openPassDialog"
        :modal="false"
        width="30%">
      <div class="current-dialog-body">
        <el-scrollbar>
          <reset-pwd @success="openPassDialog = false"></reset-pwd>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import resetPwd from "../components/resetPwd";
import guid from "@/utils/guid";

export default {
  name: `s${guid()}`,
  components: {
    resetPwd
  },
  data() {
    let ICON_TYPE = {safety: 'safety', risk: 'risk'};
    return {
      ICON_TYPE,
      listConfig: [
        {
          type: ICON_TYPE.safety,
          title: '登录密码',
          info: '安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码',
          buttonList: [
            {
              txt: '修改',
              type: 'editPassword'
            },
          ]
        },
        // {
        //   type: ICON_TYPE.risk,
        //   errorTxt: '未设置',
        //   title: '登录密码',
        //   errorInfo: '密码过于简单',
        //   info: '安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码',
        //   buttonList: [
        //     {
        //       txt: '修改',
        //       type: 'editPassword'
        //     },
        //     {
        //       txt: '测试',
        //       type: ''
        //     },
        //   ]
        // }
      ],

      openPassDialog: false
    }
  },
  methods: {
    clickHandler(buttonItem, item) {
      let {type} = buttonItem;
      if (this[type] && typeof this[type] === "function") {
        this[type](item)
      }
    },
    editPassword() {
      this.openPassDialog = true
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/style/businessTheme.scss";

.security-root {
  height: 100%;
  width: 100%;
  box-sizing: content-box;

  ::v-deep .el-card {
    height: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: none;
    border: none;

    .el-card__body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
      padding: 0;

      .el-scrollbar {
        height: 100%;
        overflow-x: hidden;

        .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
    }


    .item-root {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: max-content;
      box-sizing: border-box;

      .content-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;

        .txt-container {
          width: 90%;
          display: flex;


          .icon-container {
            margin-right: 10px;

            .icon-item {
              font-size: 20px;
              position: relative;
              top: 4px;
            }
          }

          .con {
            .txt-item {
              margin-bottom: 10px;
            }

            .tit-container {
              display: flex;
              font-size: $thirdly-font-size;

              .err-txt {
                color: #D70000;
                margin-right: 10px;
              }

              .tit-txt {
                color: #000;
              }
            }

            .error-info-container {
              font-size: $thirdly-font-size;
              color: #999;
            }

            .info-container {
              font-size: $thirdly-font-size;
              color: #999;
            }
          }
        }

        .button-container {
          flex: 1;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .button-item {
            font-size: $thirdly-font-size;
            margin-right: 19px;
            color: #0E81FF;
            cursor: pointer;
          }
        }
      }

      .el-divider {
        margin: 12px 0;
      }
    }
  }

}
</style>
